<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Website Quản Lý Hoạt Động Đoàn</title>
<!-- Link online -->
<!-- <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.css">
		<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.js"></script> -->
<!-- /Link online-->
<!-- Link local -->
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
	href="css/dataTables.bootstrap.css">
<script type="text/javascript" language="javascript"
	src="js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript"
	src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" language="javascript"
	src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript"
	src="js/dataTables.bootstrap.js"></script>
<!-- /Link local -->
</head>
<script type="text/javascript">
	$(document).ready(function() {
		var table = $('#listHoatDong').dataTable();
		$('#themHoatDong').click(function() {
			location.href = 'themHoatDong.jsp';
		});
		$('.xemTTHD').click(function() {
			location.href = 'themHoatDongDT.jsp';
		});
		$('.suaTTHD').click(function() {
			location.href = 'themHoatDongDT.jsp';
		});
		$('.xoaTTHD').click(function() {
			alert("Bạn có muốn xóa thông tin của đoàn viên này không?");
		});
		$('#inDSHoatDong').click(function() {
			alert("Bạn có muốn xuất danh sách này ra file excel không?");
		});
		$('#xoaTatCaHoatDong').click(function() {
			alert("Bạn có muốn xóa tất cả mục đã chọn không?");
		});
		$('#checkAlls').click(function() {
			// Lấy giá trị checked
			var checked = this.checked;

			// Gán giá trị đó vào các list checkbox
			$('input[name="selected"]').prop('checked', checked);
		});

	});
</script>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<nav class="navbar navbar-default" role="navigation">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse"
							data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span><span
								class="icon-bar"></span><span class="icon-bar"></span><span
								class="icon-bar"></span>
						</button>
						<a class="navbar-brand" style="color: blue;">ĐOÀN KHOA</a>
					</div>

					<div class="collapse navbar-collapse"
						id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li><a href="#">TRANG CHỦ</a></li>
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								data-toggle="dropdown">QUẢN LÝ VĂN BẢN<strong class="caret"></strong></a>
								<ul class="dropdown-menu">
									<li><a href=";#">VĂN BẢN CHỜ DUYỆT</a></li>
									<li><a href="#">.....</a></li>
								</ul></li>
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								data-toggle="dropdown">QUẢN LÝ HOẠT ĐỘNG<strong
									class="caret"></strong></a>
								<ul class="dropdown-menu">
									<li class="active"><a href=";#">Danh Sách Hoạt Động</a></li>
									<li><a href="#">Thêm Hoạt Động</a></li>
									<li><a href="#">Đánh giá hoạt động</a></li>
									<li class="divider"></li>
									<li><a href="#">Tổng kết</a></li>
								</ul></li>

							<li><a href="#">ĐỔI MẬT KHẨU</a></li>
						</ul>
						<ul class="nav navbar-nav navbar-right">
							<li><a href="#">THOÁT</a></li>
						</ul>
					</div>
				</nav>
				<div class="container">
					<h2>DANH SÁCH HOẠT ĐỘNG</h2>
					<hr>
					<div>
						<br />
						<table>
							<tr>
								<th>Mã Hoạt Động</th>
								<th>Tên Hoạt Động</th>
								<th>Đơn Vi Tổ Chức</th>
								<th></th>
							</tr>
							<tr>
								<td><input class="form-control" type="text" name="maHD"
									id="maHD" class="textfield" /></td>
								<td><input class="form-control" type="text" name="tenHD"
									id="tenHD" class="textfield" /></td>
								<td><Select class="form-control" name="gioiTinh"
									id="gioiTinh">
										<option selected="selected">--Chọn ĐVTC--</option>
										<option value="1">Đoàn Khoa</option>
										<option value="2">Chi Đoàn</option>
								</Select></td>

								<td><button class="btn btn-success btn-default">Tìm
										Kiếm</button></td>
							</tr>

						</table>
					</div>
					<br />
					<hr />
					<div>
						<button type="button" id="themHoatDong"
							class="btn btn-primary btn-default">Thêm Hoạt Động</button>
						<button type="button" id="xoaTatCaHoatDong"
							class="btn btn-danger btn-default">Xóa Mục Đã Chọn</button>
						<button type="button" id="inDSHoatDong"
							class="btn btn-primary btn-default">In Danh Sách</button>
					</div>
					<div style="float: right;">
						<input type="checkbox" id="includeinactive" checked="checked" />
						&nbsp; Bao Gồm HĐ Chưa Duyệt?
					</div>
					<br />
					<table id="listHoatDong" class="table table-striped table-bordered"
						cellspacing="0" width="100%">
						<thead>
							<tr>
								<th width="10px"><input id="checkAlls" type="checkbox" />All</th>
								<th width="70px">Mã HĐ</th>
								<th width="250px">Tên Hoạt Động</th>
								<th width="50px">SLĐK</th>
								<th width="50px">ĐVTC</th>
								<th width="80px">TG KTĐK</th>
								<th width="80px">TG KTHĐ</th>
								<th width="80px">Trạng Thái</th>
								<th width="60px"></th>
							</tr>
						</thead>
						<tbody id="tbody">
							<tr>
								<td style="text-align: center;"><input class="checkBox"
									type="checkbox" name="selected" /></td>
								<td>HD2014-01</td>
								<td>Chủ Nhật Xanh</td>
								<td>50/50</td>
								<td>Đoàn Khoa</td>
								<td>20-11-2014</td>
								<td>23-11-2014</td>
								<td>Đã Duyệt</td>
								<td><input type="image" class="xemTTHD"
									src="img/detail.png" /> &nbsp; <input type="image"
									class="suaTTHD" src="img/edit.png" /> &nbsp; <input
									type="image" class="xoaTTHD" src="img/delete.jpg" /></td>
							</tr>
							<tr>
								<td style="text-align: center;"><input class="checkBox"
									type="checkbox" name="selected" /></td>
								<td>HD2014-02</td>
								<td>Hiến Máu Nhân Đạo Lần 222</td>
								<td>100/120</td>
								<td>Đoàn Khoa</td>
								<td>20-11-2014</td>
								<td>23-11-2014</td>
								<td>Đã Duyệt</td>
								<td><input type="image" class="xemTTHD"
									src="img/detail.png" /> &nbsp; <input type="image"
									class="suaTTHD" src="img/edit.png" /> &nbsp; <input
									type="image" class="xoaTTHD" src="img/delete.jpg" /></td>
							</tr>
							<tr>
								<td style="text-align: center;"><input class="checkBox"
									type="checkbox" name="selected" /></td>
								<td>HD2014-02</td>
								<td>Hiến Máu Nhân Đạo Lần 222</td>
								<td>100/100</td>
								<td>Chi Đoàn</td>
								<td>20-11-2014</td>
								<td>23-11-2014</td>
								<td>Đã Duyệt</td>
								<td><input type="image" class="xemTTHD"
									src="img/detail.png" /> &nbsp; <input type="image"
									class="suaTTHD" src="img/edit.png" /> &nbsp; <input
									type="image" class="xoaTTHD" src="img/delete.jpg" /></td>
							</tr>
							<tr>
								<td style="text-align: center;"><input class="checkBox"
									type="checkbox" name="selected" /></td>
								<td>HD2014-03</td>
								<td>Thứ 7 Tình Nguyện</td>
								<td>100/100</td>
								<td>Đoàn Khoa</td>
								<td>20-11-2014</td>
								<td>23-11-2014</td>
								<td>Chờ Duyệt</td>
								<td><input type="image" class="xemTTHD"
									src="img/detail.png" /> &nbsp; <input type="image"
									class="suaTTHD" src="img/edit.png" /> &nbsp; <input
									type="image" class="xoaTTHD" src="img/delete.jpg" /></td>
							</tr>
						</tbody>
					</table>
					<br />
					<hr>
					<div class="row">
						<div class="col-xs-12">
							<footer>
								<p>&copy;Tieu luan chuyen nganh M-B</p>

							</footer>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
</html>